<template>
    <!-- #ifdef H5 -->
    <view class="loading"  v-if=" !ready">
    <view class="icons">
             <image src="/static/load.gif" mode="widthFix" class="icon-load"></image>
            <view class="text">{{loadTip}}</view>
       </view>
     </view>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="loading"  v-if="!isConnected || !ready">
         <view class="icons" v-if="isConnected">
             <image src="/static/load.gif" mode="widthFix" class="icon-load"></image>
              <view class="text">{{loadTip}}</view>
         </view>
         <view v-else class="notnetwork">
             <u-empty text=" " margin-top="160" mode="wifi"></u-empty>
             <view class="tip">网络居然奔溃了</view>
             <view class="txt">别紧张，去检查一下网络设置</view>
             <button type="primary" class="btn" size="mini" @tap="refresh">刷新试试</button>
         </view>
     </view>
    <!-- #endif -->
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
export default {
	props: {
		ready:{
			type:Boolean,
			default:true
		},
        loadTip:{
            type:String,
            defalut: ''
        }
	},
	data() {
		return {
            isConnected:true,
		}
	},
    mounted() {
        this.init();
    },
    methods: {
        init(){
              this.isConnected = this.network.isConnected;
        },
        refresh(){
            this.$emit('refresh');
        },
    },
    computed: {
        ...mapState({
            network:'network',
        })
    },
};

</script>

<style scoped lang="scss">
.loading{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    z-index: 999;
    text-align: center;
    .icons{
        position:absolute;
        top: 28%;
        left: 0;
        width: 100%;
        text-align: center;
        .icon{
            width: 16px;
            height: 16px;
            margin: 0 auto 6px;
            display: block;
        }
        .icon-load{
            width: 360rpx;
            height: 360rpx;
        }
        .text{
            font-size: 14px;
            line-height: 30px;
            height: 30px;
            color: #666;
        }
    }
    .notnetwork{
        padding: 200upx 0 0;
        text-align: center;
        .img{
            width: 370upx;
            height: 350upx;
            display: inline-block;
            margin-bottom: 20upx;
        }
        .tip{
            font-size: 15px;
            margin-bottom: 2px;
        }
        .txt{
            color: #999;
            font-size: 13px;
        }
        .btn{
            background: #007AFF;
            margin-top: 30upx;
        }
    }
}
</style>
